
<div class="flex gap-2">
  <div role="tablist" class="relative flex shrink-0 rounded-md p-1 bg-stone-100 dark:bg-surface w-full" aria-orientation="horizontal">
    <button role="tab" class="inline-flex relative z-[2] py-1.5 px-3 items-center justify-center align-middle text-stone-800 dark:text-white select-none font-sans font-medium text-center text-sm aria-disabled:opacity-50 aria-disabled:pointer-events-none w-full" aria-selected="true">HTML</button>
    <button role="tab" class="inline-flex relative z-[2] py-1.5 px-3 items-center justify-center align-middle text-stone-800 dark:text-white select-none font-sans font-medium text-center text-sm aria-disabled:opacity-50 aria-disabled:pointer-events-none w-full" aria-selected="false">React</button>
    <button role="tab" class="inline-flex relative z-[2] py-1.5 px-3 items-center justify-center align-middle text-stone-800 dark:text-white select-none font-sans font-medium text-center text-sm aria-disabled:opacity-50 aria-disabled:pointer-events-none w-full" aria-selected="false">Vue</button>
    <button role="tab" class="inline-flex relative z-[2] py-1.5 px-3 items-center justify-center align-middle text-stone-800 dark:text-white select-none font-sans font-medium text-center text-sm aria-disabled:opacity-50 aria-disabled:pointer-events-none w-full" aria-selected="false">Angular</button>
    <button role="tab" class="inline-flex relative z-[2] py-1.5 px-3 items-center justify-center align-middle text-stone-800 dark:text-white select-none font-sans font-medium text-center text-sm aria-disabled:opacity-50 aria-disabled:pointer-events-none w-full" aria-selected="false">Svelte</button>
    <span style="width:0;height:0;left:0;top:0;position:absolute;z-index:1" class="bg-white rounded shadow-sm shadow-stone-800/10 transition-all duration-300 ease-in"></span>
  </div>
  <div role="tabpanel" class="p-1 w-full grid grid-cols-2 gap-4 md:grid-cols-3">
    <div>
      <img class="h-40 w-full max-w-full rounded-lg object-cover object-center" src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80" alt="image-photo" />
    </div>
    <div>
      <img class="h-40 w-full max-w-full rounded-lg object-cover object-center" src="https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80" alt="image-photo" />
    </div>
    <div>
      <img class="h-40 w-full max-w-full rounded-lg object-cover object-center" src="https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80" alt="image-photo" />
    </div>
    <div>
      <img class="h-40 w-full max-w-full rounded-lg object-cover object-center" src="https://demos.creative-tim.com/material-kit-pro/assets/img/examples/blog5.jpg" alt="image-photo" />
    </div>
    <div>
      <img class="h-40 w-full max-w-full rounded-lg object-cover object-center" src="https://material-taillwind-pro-ct-tailwind-team.vercel.app/img/content2.jpg" alt="image-photo" />
    </div>
    <div>
      <img class="h-40 w-full max-w-full rounded-lg object-cover object-center" src="https://images.unsplash.com/photo-1620064916958-605375619af8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1493&q=80" alt="image-photo" />
    </div>
  </div>
</div>
